<template>
  <div class="multiple-card-container">
    <!-- start 按钮组 -->
    <div class="btn-wrap" v-if="!shareData.isArchive">
      <div>
        <template v-if="allowCreate">
          <el-button
            v-if="!isShowCardMulti"
            @click="handleEvent({action: 'create'})"
            type="primary"
            size="mini"
            plain
          >{{$t('customer.detail.taskCard.multipleCard.buttonGroup.add')}}</el-button>
          <el-button
            v-if="canAddMultiRowAuth"
            @click="addMultipleCardRow"
            type="plain-third"
            size="mini"
          >{{$t('task.detail.components.taskAddRow')}}</el-button>
          <el-button
            v-if="isExport"
            @click="exportEvent"
            type="primary"
            size="mini"
            plain
          >{{$t('common.base.export')}}</el-button>
        </template>
      </div>
      <el-button
        v-if="(canAddMultiRowAuth || canEditMultiRowAuth) && !isFromCreated"
        type="primary"
        size="mini"
        plain
        :disabled="disabledSaveButton"
        @click="saveAddMultipleCardRow"
      >{{$t('common.base.save')}}</el-button>
    </div>
    <div class="btn-group" v-if="!(allowCreate && !shareData.isArchive)">
      <el-button
        v-if="isExport"
        @click="exportEvent"
        type="primary"
        size="mini"
        plain
      >{{$t('common.base.export')}}</el-button>
    </div>
    <!-- end 按钮组 -->
    <!-- start 附加组件列表 -->
    <multiple-card-table
      ref="isMultipleCardTable"
      :data="value.attribute"
      :list-loading="listLoading"
      :columns="columns"
      :allow-create="allowCreate"
      :allow-edit="allowEdit"
      :allow-delete="allowDelete"
      :shareData='shareData'
      :task="task"
      @action="handleEvent"
      @update="updateMultipleCardRow"
      @delete="deleteMultipleCardRow"
      @submit="submitMultipleCardRow"
    />
    <!-- end 附加组件列表 -->


    <!-- start 附加组件详情弹窗 -->
    <task-card-view-dialog
      ref="taskCardView"
      :fields="cardFields"
      :value.sync="cardInstance"
    />
    <!-- end 附加组件详情弹窗 -->

    <!-- start 新增/编辑附加组件弹窗 -->
    <task-card-edit-dialog
      ref="taskCardEdit"
      :fields="card.fields"
      :value.sync="cardInstance"
      :action="action"
      :task="task"
      :inputType="value.inputType"
      @submit="submit"
      v-on="$listeners"
      @setServerDeleFiles="setServerDeleFiles"
      @getDeleteFiles="getDeleteFiles"
    />
    <!-- end 新增/编辑附加组件弹窗 -->
  </div>
</template>

<script>
/* components */
import MultipleCardTable from './CardTable';

/* mixin */
import cardMixin from './CardMixin.js';
import _ from 'lodash';

export default {
  name: 'multiple-card',
  mixins: [cardMixin],
  props: {
    value: {
      type: Object,
      default: () => ({
        attribute: []
      })
    }
  },
  computed: {
    columns() {
      let formTypes = ['autograph', 'attachment', 'separator', 'info'];

      // 附加组件是关联工单并且开启展示系统字段处理
      const cardFields = this.cardFields;
      
      let fields = [
        ...cardFields,
        {
          displayName: this.$t('customer.detail.taskCard.fields.operatorName.displayName'),
          fieldName: 'userName',
          minWidth: '80px'
        },
        {
          displayName: this.$t('customer.detail.taskCard.fields.operateTime.displayName'),
          fieldName: 'updateTime',
          minWidth: '160px'
        },
        {
          displayName: this.$t('common.base.operation'),
          fieldName: 'action',
          minWidth: '120px',
          fixed: 'right',
        }
      ]
      
      return fields.filter(field => !field.isHidden && (field.isVisible == undefined || field.isVisible) && formTypes.indexOf(field.formType) < 0);
    },
    cardFields() {
      const cardFields = _.cloneDeep(this.card.fields)
      const targetIndex = cardFields.findIndex(f => f.formType == 'related_task' && f?.setting?.isShowSystemFields);
      if (targetIndex !== -1) {
        cardFields[targetIndex].subCardFieldList.map(item=>{
          delete item.isSystem
        })
        const targetDataArray = cardFields[targetIndex].subCardFieldList || [];
        cardFields.splice(targetIndex + 1, 0, ...targetDataArray);
      }
      return cardFields;
    }
  },
  components: {
    [MultipleCardTable.name]: MultipleCardTable
  },
  methods: {
    openAddonsDialogAuto() {
      if(!this.shareData.isArchive && this.allowCreate) {
        if(!this.isShowCardMulti) {
          this.handleEvent({action: 'create'})
        }else if(this.canAddMultiRowAuth) {
          this.addMultipleCardRow()
        }
      }
    },
  },
}
</script>
<style lang="scss"> 
  .multiple-card-container {
    padding-bottom: 50px;
    min-height: 100%;
    .el-button--primary.is-disabled {
      color: #FFFFFF !important;
      background-color: $color-primary !important;
      border-color: $color-primary-light-1 !important;
      opacity: 0.35;
    }
  }
  .btn-wrap {
    padding: 10px 0;
    background: #fff;
    display: flex;
    justify-content: space-between;
    .el-button.el-button--plain-third[type=button] {
      padding: 7px 15px;
      span {
        font-size: 12px;
      }
    }
  }
</style>